<template>
	<view class="mine">
		<view class="mine-top">
			<img src="@/static/img/dwld.png" alt="" class="logo" />
			<view class="name">
				智慧华创
			</view>
			<view class="version">
				版本：V1.0
			</view>
		</view>
		<view class="mine-list">
			<view class="mine-item" v-for="(item,index) in list" :key="index" @click="itemClick(item)">
				<view class="mine-item-title">
					<img class="logo" :src="item.logo" alt="" />
					<view class="title"> {{item.title}} </view>
				</view>
				<view class="more">
					<img src="@/static/img/more.png" alt="" />
				</view>
			</view>
		</view>
		<view class="copyright">
			copyright c 2019-1019
		</view>
		<view class="locale-list">
			<u-button type="primary" style="margin: 10px 0;" :text="item.text" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)"></u-button>
		</view>
		
		<u-popup :show="showJqm" mode="center" :round="16">
			<view class="custom-popup">
				<view class="title">
					机器码
				</view>
				<view class="content">
					联系客服时，请告知您的机器码以方便帮助您解决问题；
					_1.703;com.efonder.mandarin;V:0;IMEI:a114b913-45ff-4962-8168-361b80f6f201;MAC:20:23:03:27:15:56;CID:9826B7FCADAD43C0156F32CDF59529BC;UID:7526633;QD:xiaomi;K:2304031;
				</view>
				<view class="opt">
					<u-button class="opt-btn cancel" type="primary" text="取消" @click="showJqm = false"></u-button>
					<u-button class="opt-btn confirm" type="primary" text="复制" @click="showJqm = false"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="showQq" mode="center" :round="16">
			<view class="custom-popup">
				<view class="title">
					复制客服QQ
				</view>
				<view class="content" style="text-align: center;padding: 30rpx 0;">
					客服QQ:1235555666666
				</view>
				<view class="opt">
					<u-button class="opt-btn cancel" type="primary" text="取消" @click="showQq = false"></u-button>
					<u-button class="opt-btn confirm" type="primary" text="复制" @click="showQq = false"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="showWechat" mode="center" :round="16">
			<view class="custom-popup">
				<view class="title">
					微信客服
				</view>
				<view class="content" style="text-align: center;padding: 30rpx 0;">
					<view class="">
						微信号已经复制
					</view>
					<view class="">
						请打开微信添加好友!
					</view>
				</view>
				<view class="opt">
					<u-button class="opt-btn wzdl" type="primary" text="我知道了" @click="showWechat = false"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="showUpdate" mode="center" :round="16">
			<view class="custom-popup">
				<view class="title">
					版本更新
				</view>
				<view class="">
					<view class="content" style="text-align: center;padding: 30rpx 0;">
						当前已经送最新版本
					</view>
					<view class="opt">
						<u-button class="opt-btn wzdl" type="primary" text="我知道了" @click="showUpdate = false"></u-button>
					</view>
				</view>
				<view class="">
					<view class="content" style="text-align: center;padding: 30rpx 0;">
						<view class="">
							当前版本:v.1.10
						</view>
						<view class="">
							最新版本:v.1.2.3
						</view>
					</view>
					<view class="opt">
						<u-button class="opt-btn cancel" type="primary" text="取消" @click="showUpdate = false"></u-button>
						<u-button class="opt-btn confirm" type="primary" text="立即更新" @click="showUpdate = false"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				applicationLocale:'',
				list:[
					{
						logo:require('@/static/img/mine/zhzx.png'),
						title:'账号中心',
						path:'/pages/mine/mine',
					},
					{
						id:'qq',
						logo:require('@/static/img/mine/qqkf.png'),
						title:'QQ客服',
						path:'',
					},
					{
						id:'wechat',
						logo:require('@/static/img/mine/wxkf.png'),
						title:'微信客服',
						path:'',
					},
					{
						logo:require('@/static/img/mine/yjfk2.png'),
						title:'邮件反馈',
						path:'',
					},
					{
						logo:require('@/static/img/mine/yjfk.png'),
						title:'意见反馈',
						path:'/pages/feedback/feedback',
					},
					{
						id:'jqm',
						logo:require('@/static/img/mine/jqm.png'),
						title:'机器码',
						path:'',
					},
					{
						id:'update',
						logo:require('@/static/img/mine/jcgx.png'),
						title:'检查更新',
						path:'',
					},
					{
						logo:require('@/static/img/mine/yszc.png'),
						title:'隐私政策',
						path:'/pages/settings/privacyPolicy/privacyPolicy',
					},
					{
						logo:require('@/static/img/mine/yhxy.png'),
						title:'用户协议',
						path:'/pages/settings/userAgreement/userAgreement',
					},
					{
						logo:require('@/static/img/mine/grxxsjqd.png'),
						title:'个人信息收集清单',
						path:'/pages/settings/personalInformation/personalInformation',
					},
					{
						logo:require('@/static/img/mine/dsfgx.png'),
						title:'第三方共享个人信息清单',
						path:'/pages/settings/thirdParty/thirdParty',
					}
				],
				showJqm: false,
				showQq: false,
				showWechat: false,
				showUpdate: false
			}
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'userInfo']),
			locales() {
				return [ {
					text: this.$t('locale.zh-hans'),
					code: 'zh-Hans'
				}, {
					text: this.$t('locale.zh-hant'),
					code: 'zh-Hant'
				}]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			console.log(systemInfo)
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				console.log(e)
				this.applicationLocale = e.locale;
			})
		},
		methods: {
			onLocaleChange(e) {
				if (this.isAndroid) {
				  uni.showModal({
					content: this.$t('index.language-change-confirm'),
					success: (res) => {
					  if (res.confirm) {
						uni.setLocale(e.code);
					  }
					}
				  })
				} else {
				  uni.setLocale(e.code);
				  this.$i18n.locale = e.code;
				}
			},
			itemClick(item){
				if(item.path) {
					uni.navigateTo({ url:item.path })
				}else {
					if('qq'==item.id) {
						this.showQq = true
					}else if('wechat'==item.id) {
						this.showWechat = true
					}else if('jqm'==item.id) {
						this.showJqm = true
					}else if('update' ==item.id) {
						this.showUpdate = true
					}
				}
			}
		}
	}
</script>

<style scoped lang="less">
view {
	box-sizing: border-box;
	font-family: zktqkt, zktqkt;
}
.mine-top {
	width: 100%;
	height: 598rpx;
	background: linear-gradient( 180deg, #FFFFFF 0%, #F8F8F8 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 126rpx;
	.logo {
		width: 136rpx;
		height: 136rpx;
		margin-bottom: 12rpx;
	}
	.name {
		font-size: 40rpx;
		color: #263459;
	}
	.version {
		font-size: 28rpx;
		color: #666666;
	}
}
.mine-list {
	padding: 20rpx 32rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	margin-top: -170rpx;
	margin-bottom: 40rpx;
	.mine-item {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		justify-content: space-between;
		.mine-item-title {
			display: flex;
			align-items: center;
			line-height: 1;
			gap: 16rpx;
			.logo {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.more {
			display: flex;
			img {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
}
.copyright {
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	text-align: center;
}

.custom-popup {
	width: 628rpx;
	min-height: 400rpx;
	background-image: url('../../static/img/dialog-bg.png');
	background-size: 100%;
	background-repeat: no-repeat;
	padding: 24rpx 40rpx 66rpx 60rpx;
	.title {
		text-align: center;
		font-size: 44rpx;
		color: #333333;
	}
	.content {
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #666666;
		overflow-wrap: break-word;
	}
	.opt {
		display: flex;
		gap: 28rpx;
		margin-top: 34rpx;
		.opt-btn {
			flex: 1;
			height: 72rpx;
			border-radius: 36rpx;
			font-size: 32rpx;
			border: none;
		}
		.cancel {
			background: #F3F3F3;
			color: #999999;
			
		}
		.confirm {
			background: linear-gradient( 270deg, #1B5FF3 0%, #55B1F4 100%), #397FF8;
		}
		.wzdl {
			width: 416rpx;
			height: 72rpx;
			background: linear-gradient( 270deg, #1B5FF3 0%, #55B1F4 100%), #397FF8;
		}
	}
}
</style>